<template>
    <div>
        <div class="outer">
            <el-page-header @back="goBack" content="期中考试成绩查询"></el-page-header>
            <div class="enter">
                <h1>期中考试成绩查询</h1>
                <label>
                    <p>学号</p>
                    <el-input placeholder="请输入学号查询成绩" v-model="input" clearable></el-input>
                </label>
                <label>
                    <p>姓名</p>
                    <el-input placeholder="" v-model="stu_name" clearable :disabled="true"></el-input>
                </label>
                <label>
                    <p>语文</p>
                    <el-input placeholder="" v-model.number="chinese" clearable :disabled="true">
                    </el-input>
                </label>
                <label>
                    <p>数学 </p>
                    <el-input placeholder="" v-model.number="math" clearable :disabled="true">
                    </el-input>
                </label>
                <label>
                    <p>英语</p>
                    <el-input placeholder="" v-model.number="english" clearable :disabled="true">
                    </el-input>
                </label>
                <label>
                    <p>理综 </p>
                    <el-input placeholder="" v-model.number="lizong" clearable :disabled="true">
                    </el-input>
                </label>
                <label>
                    <p>文综</p>
                    <el-input placeholder="" v-model.number="wenzong" clearable :disabled="true">
                    </el-input>
                </label>
                <button @click="get_info">查询成绩</button>
            </div>
        </div>
    </div>
</template>

<script>
import {
    PageHeader,
    Input,
} from 'element-ui'
import request from "../../api/request.js"
export default {
    data() {
        return {
            input: '',
            stu_id: "",
            stu_name: "————",
            chinese: "0",
            math: "0",
            english: "0",
            lizong: "0",
            wenzong: "0",
        }
    },
    components: {
        "el-page-header": PageHeader,
        "el-input": Input,
    },
    methods: {
        goBack() {
            // console.log('go back');
            this.$router.back()
        },
        async get_info() {
            const resullt = await request("get", `/search_mid`, { stu_id: this.input }, "")
            console.log(resullt.data[0])
            this.stu_name = resullt.data[0].stu_name
            this.stu_name = resullt.data[0].stu_name
            this.chinese = resullt.data[0].chinese
            this.math = resullt.data[0].math
            this.wenzong = resullt.data[0].wenzong
            this.lizong = resullt.data[0].lizong
            this.english = resullt.data[0].english
        }
    }
}
</script>

<style lang="scss" scoped>
.outer {
    box-sizing: border-box;
    padding: 20px;
    font-size: 20px;
    height: 100%;

    p {
        width: 80px;
        text-align: center;
    }

    label {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
    }

    h1 {
        font-size: 30px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .title {
        font-size: larger;
    }

    .el-page-header /deep/ .el-page-header__title {
        font-size: 18px;
    }

    .enter {
        width: 500px;
        margin: 0 auto;

        button {
            margin: 80px auto;
            display: block;
            width: 180px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            background-color: #1A73E8;
            color: antiquewhite;
            border: 0;
            border-radius: 10px;
        }
    }
}
</style>